<template>
	<div class="content">
		<div class="content-top">
			充电机管理_充电机详情
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
		</div>
		<div class="car-detail">
			<el-row>
				<el-col :span="8">设备名称：{{detail.name}}</el-col>
				<el-col :span="8">设备编号：{{detail.code}}</el-col>
				<el-col :span="8">型号：{{detail.model}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">货架名：{{detail.shelfName}}</el-col>
				<el-col :span="8">货架编号：{{detail.shelfCode}}</el-col>
				<el-col :span="8">所属站点：{{detail.stationName}}</el-col>
			</el-row>
            <el-row>
                <el-col :span="8">生产厂家：{{detail.manufacturer == null ? '未知' : detail.manufacturer}}</el-col>
				<el-col :span="8">状态：{{detail.status == null ? '未知' : detail.status}}</el-col>
				<el-col :span="8">备注：{{detail.note == null ? '无' : detail.note}}</el-col>
			</el-row>
		</div>
        <div class="car-title">
			<div class="car-title-left">充电记录</div>
		</div>
		<div class="car-table-page">
        <div class="car-detail-table">
			<el-table :data="recordList" show-header stripe style="width: 100%;">
				<el-table-column align="center" label="流水号">
					<template slot-scope="scope">{{scope.row.serialNumber}}</template>
				</el-table-column>
				<el-table-column align="center" label="货架号">
					<template slot-scope="scope">{{scope.row.shelfCode}}</template>
				</el-table-column>
				<el-table-column align="center" label="充电状态">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="充电开始时间">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="充电结束时间">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="开始soc">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="结束soc">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="本次充电电量">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
				<el-table-column align="center" label="停止原因">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
                <el-table-column align="center" label="充电电池包编码">
					<template slot-scope="scope">{{scope.row.status}}</template>
				</el-table-column>
			</el-table>
		</div>
            <div class="content-page">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
				:page-size=limit layout="prev, pager, next, jumper" :total=total>
				</el-pagination>
			</div>
		</div>
        <div class="car-title">
			<div class="car-title-left">实时监控</div>
		</div>
        <div class="car-detail">
			<el-row>
				<el-col :span="6">IP地址：{{monitorDetail.ipAddress}}</el-col>
				<el-col :span="6">流水号：{{monitorDetail.serialNumber}}</el-col>
                <el-col :span="6">充电机地址：{{monitorDetail.address}}</el-col>
                <el-col :span="6">充电状态：{{monitorDetail.status}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="6">输出电压：{{monitorDetail.outputVoltage + 'V'}}</el-col>
				<el-col :span="6">输出电流：{{monitorDetail.outputCurrent + 'A'}}</el-col>
                <el-col :span="6">需求电压：{{monitorDetail.demandVoltage == null ? 0 :monitorDetail.demandVoltage + 'V'}}</el-col>
                <el-col :span="6">需求电流：{{monitorDetail.demandCurrent + 'A'}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="6">已充电时间：{{monitorDetail.chargerTime == null ?'未知':monitorDetail.chargerTime +'分钟'}}</el-col>
				<el-col :span="6">剩余电量：{{monitorDetail.soc == null ?'0%':monitorDetail.soc +'%'}}</el-col>
                <el-col :span="6">整车动力蓄电池当前电压：{{monitorDetail.currentVoltage == null ?'0%': monitorDetail.currentVoltage + 'V'}}</el-col>
                <el-col :span="6">接插件状态：{{monitorDetail.connectorStatus}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">电池组编码：{{monitorDetail.batteryCode}}</el-col>
                <el-col :span="6">电池组充电次数：{{monitorDetail.numberOfCharge}}次</el-col>
                <el-col :span="6">电池包累计行驶总里程：{{monitorDetail.cumulativeMileage + 'km'}}</el-col>
                <el-col :span="6">电池包累计充电电量：{{monitorDetail.accumulativeCharge + 'km/h'}}</el-col>
			</el-row>
		</div>
		
       <div id="myChart" :style="{width: '1100px', height: '400px' , margin: '20px' }"></div>
		
		
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
			</center>
		</div>
		
	</div>
</template>

<script>
	export default{
		props:['id'],
		components:{
		
		},
		data(){
			return{
			   reason:'',
			   detail:'',
			   batteryPosition:[
				   {
					   id:0,
					   name:'仓库'
				   },
				   {
					   id:1,
					   name:'换电站'
				   },
				   {
					   id:2,
					   name:'车上'
				   }
			   ],
			   page:1,
			   limit:5,
			   recordList:[],
			   total: 1,
			   monitorDetail:'',
			   timer:null,
			   temperature:[],
			   list:[]

			}
			
		},
		created() {
		},
		mounted() {
			this.get_detail()
			this.get_warehouse_record()
			this.$nextTick(()=>{
				this.drawLine()
			})
			this.get_monitor()
			
			
		},
		methods:{
			textConversion(idx){
				for(let item of this.batteryPosition){
					if(item.id == idx){
                      return item.name
					}
				}
			},
			/* 获取详情 */
			get_detail(){
				var self = this
                this.$axios.get(this.$global.serverIp + 'station/equipmentCharger/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
							self.detail = res.data
						}
				
					})
			},
			/* 返回 */
			onBack(){
				this.$emit('isDetail')
			},
			/* 获取充电记录 */
			get_warehouse_record (){
				var self = this
                this.$axios.post(this.$global.serverIp + 'station/batteryOperateRecord/findPage',{
					"batteryId":self.id,
					"limit":self.limit,
					"page":self.page
				})
                .then(res =>{
					self.recordList = res.data.list
					self.total = res.data.totalCount;
                })
			},
			// 获取当前时间
				getTime() {	
					var ts = arguments[0] || 0;
					var t, h, i, s;
					t = ts ? new Date(ts * 1000) : new Date();
					h = t.getHours();
					i = t.getMinutes();
					s = t.getSeconds();
					// 定义时间格式
					return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
				},
			/* 实时监控 */
			get_monitor(){
				this.timer = window.setInterval(()=>{
					setTimeout(()=>{
					   var self = this
					   var temp = []
							this.$axios.get(this.$global.serverIp + 'station/equipmentCharger/chargerMonitorDetail/' + this.id)
							.then(res =>{
								if(res.data == undefined){
								   clearInterval(self.timer)
								   self.timer=null
								   return;
								}
							  if(res != ''){
								self.monitorDetail = res.data
								let time = self.getTime(Math.round(new Date().getTime() / 1000))
								  if(self.list.length > 10){
									self.list.shift()
									self.temperature.shift()
								  }
								  self.list.push(time)
								  self.temperature.push(res.data.temperature)
								   this.drawLine()
							  }
								
							})
					},0)
				},500)
				
			},
			handleSizeChange(val) {
			
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_warehouse_record();
            },
            onBack(){
                this.$emit('isDetail')
			},
			 drawLine(){
               // 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.querySelector('#myChart'));
                // 绘制图表
               myChart.setOption({
                    xAxis: {
					data: this.list,
					boundaryGap: false,
					axisTick: {
						show: false
					},
					boundaryGap:true
				},
						grid: {
						left: 10,
						right: 10,
						bottom: 20,
						top: 30,
						containLabel: true
						},
						tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						//   padding: [5, 10]
						},
						yAxis: {
						axisTick: {
							show: false
						}
						},
						legend: {
						data: ['当前充电池温度']
						},
						series: [{
						data:this.temperature,
						name: '当前充电池温度', itemStyle: {
							normal: {
							color: '#409EFF',
							lineStyle: {
								color: '#409EFF',
								width: 2
							}
							}
						},
						smooth: true,
						type: 'line',
						animationDuration: 1000,
						animationEasing: 'cubicInOut'
						},]
				})
				
               
         }
		},
		destroyed(){
            clearInterval(this.timer);        
			this.timer = null;
		}
	}
</script>

<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		height: 300px;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	.car-table-page{
		width: 1088px;
		height: 300px;
	}
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.application-reason{
		display: flex;
		align-items: flex-start;
	}
	.center-button{
		padding-bottom: 30px;
	}
</style>

